<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }
        table{
            /* 合并边框线 */
            border-collapse: collapse;
            margin:0 auto;
            /* padding:5px 30px; */
            text-align:center;
        }
        table,th,td{
            border:1px solid #000;
            padding:5px 30px;
        }
    </style>
</head>
<body>
    <!-- 1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。
        2、页面打印一个表格，计算出本月银行卡还剩下的余额。 -->
        <h2>银行卡单月账单</h2>
       
        <script>
            // 1.通过对话框获取用户输入的信息
            let total = +prompt('请输入卡上金额')
            let electricity = +prompt('请输入电费')
            let water = +prompt('请输入水费')
            let Internet_fees = +prompt('请输入网费')
            // 2.计算银行卡yue
            let balance = total - (electricity + water +Internet_fees)
            //4.通过网页输出表格
            document.write(`
            //3.制作对应的表格
            <table>
                <tr>
                    <th>银行卡金额</th>
                    <th>电费</th>
                    <th>水费</th>
                    <th>网费</th>
                    <th>卡下余额</th>
                </tr>
                <tr>
                    <td>${total}</td>
                    <td>${electricity}</td>
                    <td>${water}</td>
                    <td>${Internet_fees}</td>
                    <td>${balance}</td>
                </tr>
            </table>
        `)

        </script>

</body>
</html>